<template>
  <view class="main">
    <!-- 区分随手拍或是反馈的tabs -->
    <view class="endTitle">
      <view
        v-for="(item, index) in items"
        :key="index"
        :class="{ btna: btnnum == index }"
        @tap="change(index)"
      >
        <view class="titleText">
          {{ item.name }}
            <u-badge
                v-if="index === 0"
                type="error"
                :count="feedBadgeNum"
                class="badgeStyle"
            />
            <u-badge
                v-if="index === 1"
                type="error"
                :count="auditBadgeNum"
                style="position: absolute;top:-12rpx;margin-left: 85rpx;"
                class="badgeStyle"
            />
            <u-badge
                v-if="index === 2"
                type="info"
                :count="finishedBadgeNum"
                style="position: absolute;top:-12rpx;margin-left: 85rpx;"
                class="badgeStyle"
            />
        </view>
      </view>
    </view>
    <u-image
      width="100%"
      height="320rpx"
      mode="widthFix"
      :src="paiImg"
      v-if="showWhich === 'pai'"
    ></u-image>
    <u-image
      width="100%"
      height="290rpx"
      mode="widthFix"
      :src="feedBackImg"
      v-else
    ></u-image>
    <view class="searchInput">
      <u-search
        placeholder="请输入标题"
        border-color="#fff"
        color="#fff"
        placeholder-color="#fff"
        :show-action="false"
        v-model="keyword"
        @search="handleSearch"
      ></u-search>
    </view>
    <!-- 待反馈 -->
    <view class="endCont" :class="{ dis: btnnum === 0 }">
      <block v-if="list.length">
        <news-list
          toPage="judgeSui"
          titleName="我的随手拍-待反馈"
          :newsList="list"
          :showWhich="showWhich"
          v-if="showWhich === 'pai'"
        ></news-list>
        <news-list
          toPage="judgeFeedBack"
          titleName="任务列表-待反馈"
          :newsList="list"
          :showWhich="showWhich"
          v-else
        ></news-list>
      </block>
      <view style="margin-top: 100rpx;" v-if="noData === true">
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
    </view>
    <!-- 待审核 -->
    <view class="endCont" :class="{ dis: btnnum === 1 }">
      <block v-if="listAudit.length">
        <news-list
          toPage="judgeSui"
          titleName="我的随手拍-待审核"
          :newsList="listAudit"
          :showWhich="showWhich"
          v-if="showWhich === 'pai'"
        ></news-list>
        <news-list
          toPage="judgeFeedBack"
          titleName="任务列表-待审核"
          :newsList="listAudit"
          :showWhich="showWhich"
          v-else
        ></news-list>
      </block>
      <view style="margin-top: 100rpx;" v-if="noDataAudit === true">
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
    </view>
    <!-- 已结束 -->
    <view class="endCont" :class="{ dis: btnnum === 2 }">
      <block v-if="listFinished.length">
        <news-list
            toPage="judgeSui"
            titleName="我的随手拍-已结束"
            :newsList="listFinished"
            :showWhich="showWhich"
            v-if="showWhich === 'pai'"
        ></news-list>
        <news-list
            toPage="judgeFeedBack"
            titleName="任务列表-已结束"
            :newsList="listFinished"
            :showWhich="showWhich"
            v-else
        ></news-list>
      </block>
      <view style="margin-top: 100rpx;" v-if="noDataFinished === true">
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
    </view>
    <view>
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>
  </view>
</template>
<script>
import { BASE_URL } from "../../util/api";
import newsList from "../news/newsList.vue";
import { myActList } from "../../../common/api/mine";
let that;

export default {
  name: "Suishoupai",
  components: {
    newsList,
  },
  data() {
    return {
      btnnum: 0,
      items: [
        {
          name: "待反馈",
          num: null,
        },
        {
          name: "待审核",
          num: null,
        },
        {
          name: "已结束",
          num: null,
        },
      ],
      options: {},
      keyword: "",
      srcPai: "/cfpatrol/static/img/paiBanner.jpg",
      srcFeedBack:
        "/cfpatrol/static/img/feedBackBanner.jpg",
      // status 0 审核不通过  // 1 审核通过  // 2 待处理  // 3 待审核
      // 待反馈
      page: 1, //待反馈当前页数
      totalPages: 0, //待反馈总页数
      list: [],
      noData: false,
      // 待审核
      pageAudit: 1, //待审核当前页数
      totalPagesAudit: 0, //待审核总页数
      listAudit: [],
      noDataAudit: false,
      // 已完成
      pageFinished: 1,  // 已完成当前页数
      totalPageFinished: 0,  // 已完成总页数
      listFinished: [],
      noDataFinished: false,
      // 底部开始拍摄按钮是否显示 pai:随手拍  feedback: 任务列表
      showWhich: "pai",
      feedBadgeNum: 0,
      auditBadgeNum: 0,
      finishedBadgeNum: 0,
      //  返回顶部
      scrollTop: 0,
    };
  },
  computed: {
    paiImg() {
      return BASE_URL + this.srcPai
    },
    feedBackImg() {
      return BASE_URL + this.srcFeedBack
    }
  },
  onLoad(options) {
    that = this;
    // options pai 和 feedback
    that.options = this.$Router.extract(options);
    // console.log("ppppppp", that.options);
    if (that.options.showWhich === "pai") {
      that.feedBadgeNum = that.options.myPaiWaitFeed
      that.auditBadgeNum = that.options.myPaiWaitAudit
      that.finishedBadgeNum = that.options.myPaiFinished
    } else {
      that.feedBadgeNum = that.options.myFeedWaitFeed
      that.auditBadgeNum = that.options.myFeedWaitAudit
      that.finishedBadgeNum = that.options.myFeedFinished
    }
    that.handleJudgePage(that.options);
  },
  methods: {
    change(e) {
      this.btnnum = e;
      that.handleJudgePage(that.options);
    },
    handleJudgePage(_options) {
      // console.log('suishoupai', _options);
      let _userInfo = uni.getStorageSync("_userInfo");
      let Data = {
        name: this.keyword ? this.keyword : '',
        audit_status: that.btnnum === 0 ? 2 : that.btnnum === 1 ? 3 : 999,
        page: that.btnnum === 0 ? that.page : that.btnnum === 1 ? that.pageAudit : that.pageFinished
      };
      if (_options && _options.showWhich === "feedback") {
        that.showWhich = _options.showWhich;
        that.changeTitle();
        Data.type =  "feedback"
        Data.feed_user_id = _userInfo.admin_user_id
      } else {
        Data.type = "pai"
        Data.submit_user_id = _userInfo.admin_user_id
      }
      that.getMyList(Data);
    },
    getMyList(Data) {
      that.noData = false
      if (that.btnnum === 0) {
        myActList(Data).then((res) => {
          that.totalPages = res.pages
          that.feedBadgeNum = res.count
          // console.log('myActList', res)
          if (res.list.length > 0) {
            that.page = that.page + 1
            that.list = [...that.list, ...res.list]
          }
          if (that.list.length === 0) that.noData = true
        });
      } else if(that.btnnum === 1) {
        myActList(Data).then((res) => {
          that.totalPagesAudit = res.pages
          that.auditBadgeNum = res.count
          // console.log('myActList', res)
          if (res.list.length > 0) {
            that.pageAudit = that.pageAudit + 1
            that.listAudit = [...that.listAudit, ...res.list]
          }
          if (that.listAudit.length === 0) that.noDataAudit = true
        });
      } else {
        myActList(Data).then((res) => {
          that.totalPageFinished = res.pages
          that.finishedBadgeNum = res.count
          // console.log('myActList', res)
          if (res.list.length > 0) {
            that.pageFinished = that.pageFinished + 1
            that.listFinished = [...that.listFinished, ...res.list]
          }
          if (that.listFinished.length === 0) that.noDataFinished = true
        });
      }
    },
    onReachBottom() {
      //触底开始下一页
      if (that.btnnum === 0 && that.page <= that.totalPages)
        this.handleJudgePage(this.options); //重新调用请求获取下一页数据
      if (that.btnnum === 1 && that.pageAudit <= that.totalPagesAudit)
        this.handleJudgePage(this.options); //重新调用请求获取下一页数据
      if (that.btnnum === 2 && that.pageFinished <= that.totalPageFinished)
        this.handleJudgePage(this.options); //重新调用请求获取下一页数据
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    changeTitle() {
      uni.setNavigationBarTitle({
        title: "任务列表",
      });
    },
    handleSearch() {
      that.page = that.pageAudit = that.pageFinished = 1
      that.totalPages = that.totalPagesAudit = that.totalPageFinished = 0
      that.list = that.listAudit = that.listFinished = []
      that.noData = that.noDataAudit = that.noDataFinished = false
      that.handleJudgePage(that.options);
    },
  },
};
</script>

<style scoped>
.main {
  width: 100vw;
  height: 100vh;
}
.endTitle {
  display: flex;
}
.endTitle view {
  flex-grow: 1;
  margin: 5rpx 20rpx;
  text-align: center;
  border-radius: 30%;
}
.endCont {
  display: none;
  background: #ffffff;
}
.btna {
  color: #ffffff;
  background-image: linear-gradient(90deg, #2979ff 0%, #8bc6ec 100%);
}
.badgeStyle {
  position: absolute;
  top: -12rpx;
  margin-left: 85rpx;
}
.dis {
  display: block;
  height: 100vh;
}
.topCoverImg {
  width: 100vw;
  height: 400 rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.searchInput {
  width: 100vw;
  padding: 0 20 rpx;
  margin-bottom: 10 rpx;
}

.suishoupaiButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 148 rpx;
  box-sizing: border-box;
  padding: 0 30 rpx;
  position: fixed;
  background-color: #ffffff;
  bottom: 0;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.suishoupaiButton u-button {
  width: 100%;
  border-radius: 10 rpx;
}
</style>
